import React, { useState } from 'react';
import { Breadcrumb, Layout, theme } from 'antd';
import MainMenu from "@/components/MainMenu"

// 编程式导航
import { Outlet } from "react-router-dom"

const { Header, Content, Footer, Sider } = Layout;


const View: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    return (
        <Layout style={{ minHeight: '100vh' }}>
            {/* 侧边栏 */}
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="demo-logo-vertical" />
                <MainMenu></MainMenu>
            </Sider>
            <Layout>
                {/* 头部 */}
                <Header style={{ padding: 0, background: colorBgContainer }} >
                    {/* 面包屑 */}
                    <Breadcrumb style={{ margin: '0 16px', lineHeight: "64px" }} items={[{ title: 'User' }, { title: 'Bill' }]}>
                        {/* <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item> */}
                    </Breadcrumb>
                </Header>
                {/* 内容 */}
                <Content style={{ margin: '16px 16px 0' }}>
                    {/* <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        Bill is a cat.
                    </div> */}
                    {/* 窗口 */}
                    <Outlet></Outlet>
                </Content>
                {/* 脚部 */}
                <Footer style={{ textAlign: 'center', padding: 0, lineHeight: "48px" }}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};

export default View;